import React, { useMemo } from "react";
import { Provider } from "react-redux";
import { store } from "@/redux";

export const Html: React.FC<React.PropsWithChildren> = (props) => {
  const { children } = props;
  return useMemo(() => {
    if (process.env.NODE_ENV === "development") {
      return <Provider store={store}>{children}</Provider>;
    }
    return (
      <html>
        <head>
          <meta charSet="utf-8" />
          <meta name="viewport" content="width=device-width, initial-scale=1" />
          <title>react-template-ssr</title>
          <link rel="stylesheet" href="/client/styles.css" />
        </head>
        <body>
          <Provider store={store}>{children}</Provider>
        </body>
      </html>
    );
  }, [children]);
};

export default Html;
